import logo from './logo.svg';
import './App.css';
// react-router-dom  react的路由插件
import React from 'react'
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom'
// BrowserRouter as Router 重命名为router  基于history模式   路由最大的组件包裹所有
// Routes  路由每个配置项的包裹外套
// Route  每个配置项
// Link   是用来跳转的组件
import Home from './pages/Home/Home'
import Cart from './pages/Cart/Cart'
import List from './pages/List/List'
import Mine from './pages/Mine/Mine'
import CartLeft from './pages/Cart/CartLeft'
import CartRight from './pages/Cart/CartRight'
import Todo from './pages/Todo/index'
import TodoInex from './pages/ReduxTodo/index'
function App () {
  return (
    <React.Fragment>

      <div className="App">
        <Router>
          <ul className="navList">
            <li>
              <Link to="/home">首页</Link>
            </li>
            <li>
              <Link to="/cart">购物车</Link>
            </li>
            <li>
              <Link to="/todoindex">Redux的todolist</Link>
            </li>
            <li>
              <Link to="/list">列表</Link>
            </li>
            <li>
              <Link to="/mine/189">个人中心</Link>
            </li>
            <li>
              <Link to="/todo">每日任务</Link>
            </li>
          </ul>
          <Routes>
            <Route path="/home" element={<Home />}></Route>
            {/* react的子路由 */}
            <Route path="/cart" element={<Cart />}>
              <Route path="cartleft" element={<CartLeft />}></Route>
              <Route path="cartright" element={<CartRight />}></Route>
            </Route>
            <Route path='/list' element={<List />}></Route>
            <Route path='/mine/:cid' element={<Mine />}></Route>
            <Route path="/todo" element={<Todo />}></Route>
            <Route path="/todoindex" element={<TodoInex />}></Route>
          </Routes>
        </Router>
      </div>
    </React.Fragment>
  );
}


export default App;
